<template>
	<view class="relative">
		<image style="width: 100vw;height: 100vh;position: fixed;" class="fatherBg"
			src="https://ryyf.wangjintech.cn/static/image/point/bg.png">
		</image>
		<up-navbar title="积分商城" leftIcon="" :autoBack="false" placeholder bgColor="transparent">
		</up-navbar>
		<view class="intergral-banner relative zi2">
			<!-- <image src="https://ryyf.wangjintech.cn/static/image/point/prodctHead.png"
				style="width: 690rpx;height: 240rpx;" /> -->
			<up-swiper :list="swiperList" height='240rpx' indicator indicatorMode="line" keyName="bannerImg" circular
				@click="clickSwiper"> </up-swiper>
		</view>
		<view class="intergral-tabs">
			<up-tabs :activeStyle='tabs.activeSyle' :inactiveStyle='tabs.inactiveStyle' :itemStyle='tabs.itemStyle'
				:list="tabsList.list" :lineWidth='tabs.lineWidth' :lineHeight='tabs.lineHeight' @change="typeChange"></up-tabs>
		</view>
		<view class="intergral-pointProduct flex wrap justify-content_space-between relative zi2">
			<PointsProducts v-for="item in response.list" :key="item.id" :item='item' />
		</view>
		<view class="relative zi2" v-if="response.list.length === 0">
			<up-empty textColor='#fff' iconColor="#fff" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</up-empty>
		</view>
		<up-gap height="120rpx"></up-gap>
		<image class="cartIcon fixed zi2" src="https://ryyf.wangjintech.cn/static/image/point/carticon.png"
			@click="enterCart" />
		<up-back-top :scrollTop="scrollTop" :iconStyle="iconStyle" :duration="200" :bottom="160"></up-back-top>
		<tabbar :current="2" />
	</view>
</template>

<script setup>
	import tabbar from '@/components/tabbar.vue';
	import PointsProducts from "./components/PointsProducts.vue"
	import openApi from '@/api/biz/open';
	import secondApi from "@/api/biz/second.js"
	import {
		tabs
	} from '@/common';
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onReady,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app"

	const swiperList = ref([]);

	function getBannerList() {
		openApi.getBannerList({
			type: 2
		}).then(res => {
			swiperList.value = res.data;
		})
	}

	function clickSwiper(index) {
		let imgs = swiperList.value.map(item => item.bannerImg)
		uni.previewImage({
			urls: imgs,
		});
	}

	// 购物车
	const enterCart = () => {
		uni.navigateTo({
			url: "/pointProduct/cart/index"
		})
	}

	const scrollTop = ref(0);
	const iconStyle = {
		fontSize: '32rpx',
		color: '#2979ff'
	};

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	onReachBottom(() => {
		if (response.list.length >= response.total) return;
		queryParams.pageNo++;
		getProductPage()
	})

	const typeChange = (e) => {
		tabsList.active = e.id === -1 ? '' : e.id;
		queryParams.pageNo = 1;
		response.list = []
		getProductPage()
	}

	const tabsList = reactive({
		list: [{
			name: '全部商品',
			id: -1
		}],
		active: ''
	});

	function allList() {
		openApi.allList({
			type: 2
		}).then(res => {
			tabsList.list = [...tabsList.list, ...res.data]
		})
	}

	const queryParams = reactive({
		pageNo: 1,
		pageSize: 10
	})

	const response = reactive({
		list: [],
		total: 0
	})

	const getProductPage = () => {
		secondApi.getProductPage({
			...queryParams,
			type: tabsList.active
		}).then(res => {
			if (queryParams.pageNo === 1) response.list = res.data.list;
			else response.list = [...response.list, ...res.data.list]
			response.total = res.data.total;
		})
	}

	onReady(() => {
		getProductPage()
		getBannerList()
		allList()
	})
</script>

<style scoped lang="scss">
	.cartIcon {
		right: 6rpx;
		bottom: 357rpx;
		width: 127rpx;
		height: 154rpx;
	}

	.intergral-pointProduct {
		padding: 10rpx 30rpx 110rpx;
	}

	.intergral-tabs {
		margin-top: 20rpx;
		padding: 0 10rpx;
	}

	.intergral-banner {
		width: 690rpx;
		height: 240rpx;
		margin: 10rpx auto 0;
	}
</style>